<template>
  <div class="home-page">
    <div class="header">
      <img :src="item.headImage">
      <div class="name" >{{item.nickName}}</div>
    </div>
    <div class="navs">
      <van-cell title="我的订单" icon="description" is-link to="/order-list"/>
      <van-cell title="我的拼团" icon="points" is-link to="/my-group"/>
    </div>
    <div class="navs">
      <van-cell title="我要推广-申请" icon="description" is-link to="/contrive"/>
      <van-cell title="我要推广-申请通过" icon="description" is-link to="send"/>
    </div>
    <tabbar :active="2"></tabbar>
  </div>
</template>

<script>
import Tabbar from '@/components/Tabbar.vue'
import { mine } from '@/api'

export default {
  name: 'user',
  components: {
    Tabbar
  },
  data() {
    return {
      id: '',
      item:{}
    }
  },
  created(){
    this.getData()
  },
  methods: {
    getData(){
      this.id = localStorage.getItem('userID')
      mine({userId:this.id}).then(res => {
          console.log(res);
          this.item = res
        })
    },
    link(path) {
      this.$router.push(path)
    }
  }
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
@import '../style/mixin'
.header
  padding 30px 15px
  display flex
  align-items center
  background #ffffff
  img 
    display block
    width 16vw
    height 16vw
    margin-right 15px
.navs
  margin-top $part-width
</style>
